<template>
  <div class="calendar-component">
    <div class="global-calendar-wrap">
      <div class="calendar-header">
        <div>
          <span class="item arrow-left" @click="ChangeYearFun('prev')">❮</span>
          <span style="cursor: pointer;font-size:12px" @click="ChangeMonthFun('prev')">❮</span>
        </div>
        <div class="calendaer-title">
          {{ selectYear + "年" + " " + selectMonth + "月" }}
        </div>
        <div>
          <span
            style="cursor: pointer;font-size:12px"
            @click="ChangeMonthFun('next')"
          >
            ❯
          </span>
          <span class="item arrow-right" @click="ChangeYearFun('next')">❯</span>
        </div>
      </div>
      <div class="calendar-content">
        <div class="calendar-week-wrap">
          <p v-for="(i, index) in weekDayList" :key="index">
            {{ i }}
          </p>
        </div>
        <div class="everyDays-wrap">
          <!-- 上月剩余 -->
          <div
            v-for="i in prevLastDays"
            :key="i.key"
            class="everyDays-item no-current-month"
          >
            <p>{{ i.day }}</p>
            <!-- <span>农历</span> -->
          </div>
          <!-- 当前月 -->
          <div
            v-for="i in currentDays"
            :key="i.key"
            class="everyDays-item current-hover"
            :class="[
              { realToday: i.isRealToday },
              { selectDay: i.isChecked },
              { yearFirstDay: isChangeYear && FirstInChangeYearFun(i) }, // 切换年时选中当前月第一天，避开当前时间的年月日
              { monthFirstDay: isChangeMonth && FirstInChangeMonthFun(i) }, // 切换月时选中当前月第一天，避开当前时间的年月日
            ]"
            @click="CheckedDayFun(i)"
          >
            <p>{{ i.day }}</p>
            <!-- <span>劳动节</span> -->
            <!-- 根据考勤情况判断此日是否为非正常考勤日 -->
            <!-- <i class="iconfont icon-dian everyDays-item-flag" /> -->
          </div>
          <!-- 下月开头 -->
          <div
            v-for="i in nextheaderDays"
            :key="i.key"
            class="everyDays-item no-current-month"
          >
            <p>{{ i.day }}</p>
            <!-- <span>农历</span> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 内容为周一到周天的顺序排列,每行7个,一共6行,包括上个月和当前月和下个月

export default {
  name: 'Calendar',
  props: {
    fatherYear: { required: false, type: Number },
    fatherMonth: { required: false, type: Number },
    fatherDay: { required: false, type: Number },
    datas: { required: false, type: Array }
  },
  data () {
    return {
      selectYear: this.fatherYear || new Date().getFullYear(),
      selectMonth: this.fatherMonth || new Date().getMonth() + 1,
      selectDay: this.fatherDay || '',
      today: this.fatherDay || new Date().getDate(),
      weekDayList: ['一', '二', '三', '四', '五', '六', '日'],
      isChangeMonth: false, // 是否切换了月
      isChangeYear: false, // 是否切换了年
      // 上个月剩余
      prevLastDays: [],
      // 当月
      currentDays: [],
      // 下个月开头
      nextheaderDays: []
    }
  },
  // 生命周期-挂载完成(可以访问DOM元素)
  async mounted () {
    await this.InitCurrentDaysFun(this.selectYear, this.selectMonth)
  },
  methods: {
    // 当前42天数
    InitCurrentDaysFun (year, month, day) {
      const prevArr = []
      const currentArr = []
      const nextArr = []

      // 获取当前月第一天
      const currentFirstDay = new Date(year, month - 1, 1)
      // 获取当前月第一天星期几
      let firstWeekDay = currentFirstDay.getDay()
      // 星期几为0的话则重置为7
      if (firstWeekDay === 0) {
        firstWeekDay = 7
      }
      // 获取当前42天的第一天
      const startTime =
        currentFirstDay - (firstWeekDay - 1) * 24 * 60 * 60 * 1000

      for (let i = 0; i < 42; i++) {
        const dayItem = {
          key: startTime + i * 24 * 60 * 60 * 1000,
          date: new Date(startTime + i * 24 * 60 * 60 * 1000),
          day: new Date(startTime + i * 24 * 60 * 60 * 1000).getDate(),
          month: new Date(startTime + i * 24 * 60 * 60 * 1000).getMonth() + 1,
          year: new Date(startTime + i * 24 * 60 * 60 * 1000).getFullYear(),
          isChecked: false
        }
        dayItem.isCurrentMonth = this.IsCurrentMonthFun(dayItem.date)
        dayItem.isRealToday = this.IsTodayFun(dayItem.date)
        if (dayItem.month < this.selectMonth) {
          prevArr.push(dayItem)
        } else if (dayItem.month === this.selectMonth) {
          currentArr.push(dayItem)
        } else if (dayItem.month > this.selectMonth) {
          nextArr.push(dayItem)
        }
      }
      this.prevLastDays = prevArr
      this.currentDays = currentArr
      this.nextheaderDays = nextArr
    },

    // 上下月切换
    ChangeMonthFun (type) {
      this.isChangeMonth = true
      this.selectDay = ''
      if (type === 'prev') {
        if (this.selectMonth === 1) {
          this.selectYear = this.selectYear - 1
          this.selectMonth = 12
        } else if (this.selectMonth > 1 && this.selectMonth <= 12) {
          this.selectMonth = this.selectMonth - 1
        }
      } else if (this.selectMonth === 12) {
        this.selectYear = this.selectYear + 1
        this.selectMonth = 1
      } else if (this.selectMonth >= 1 && this.selectMonth < 12) {
        this.selectMonth = this.selectMonth + 1
      }
      this.InitCurrentDaysFun(this.selectYear, this.selectMonth)
    },

    // 上下年切换
    ChangeYearFun (type) {
      this.isChangeYear = true
      this.selectDay = ''
      if (type === 'prev') {
        this.selectYear = this.selectYear - 1
      } else {
        this.selectYear = this.selectYear + 1
      }
      this.InitCurrentDaysFun(this.selectYear, this.selectMonth)
    },

    // 单日点击选择
    CheckedDayFun (item) {
      this.currentDays.map((x) => {
        x.isChecked = false
      })
      this.$set(item, 'isChecked', true)
    },

    // 是否是今天
    IsTodayFun (date) {
      const currentYear = new Date(new Date()).getFullYear()
      const currentMonth = new Date(new Date()).getMonth() + 1
      const currentDay = new Date(new Date()).getDate()
      const itemYear = new Date(date).getFullYear()
      const itemMonth = new Date(date).getMonth() + 1
      const itemDay = new Date(date).getDate()
      return (
        itemYear === currentYear &&
        itemMonth === currentMonth &&
        itemDay === currentDay
      )
    },

    // 是否是当前月
    IsCurrentMonthFun (date) {
      const currentYear = new Date(
        this.selectYear,
        this.selectMonth - 1,
        1
      ).getFullYear()
      const currentMonth =
        new Date(this.selectYear, this.selectMonth - 1, 1).getMonth() + 1
      const itemYear = new Date(date).getFullYear()
      const itemMonth = new Date(date).getMonth() + 1
      return itemYear === currentYear && itemMonth === currentMonth
    },

    // 切换月后选中当前月第一天
    FirstInChangeMonthFun (item) {
      // currentXXXX当前最新时间的年月日
      const currentMonth = new Date(new Date()).getMonth() + 1
      const currentDay = new Date(new Date()).getDate()
      const itemMonth = new Date(item.date).getMonth() + 1
      const itemDay = item.day
      if (currentMonth !== itemMonth && currentDay !== itemDay) {
        if (item.day === 1 && item.isCurrentMonth) {
          return itemDay !== currentDay
        }
      }
    },

    // 切换年后选中当前月第一天
    FirstInChangeYearFun (item) {
      if (item.day === 1 && item.isCurrentMonth && !item.isRealToday) {
        // currentXXXX当前最新时间的年月日
        const currentYear = new Date(new Date()).getFullYear()
        const itemYear = new Date(item.date).getFullYear()
        return itemYear !== currentYear
      }
    }
  }
}
</script>
<style lang="less" scoped>
// @import url(); 引入公共css类
.calendar-component {
  border-radius: 5px;
  background: #fff;
  .global-calendar-wrap {
    width: 300px;
    height: 330px;
    padding: 0 10px;
    .calendar-header {
      overflow: hidden;
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid rgb(236, 235, 235);
      div {
        line-height: 45px;
        .item {
            height: 2em;
            line-height: 2em;
            text-align: center;
            padding: 5px 10px 5px;

            &.arrow-left {
                margin-right: 20px;
                width: 2em;
                background-color: #e8e8e8;
                cursor: pointer;

                &:hover {
                    background-color: #d6d6d6;
                }
            }
            &.arrow-right {
                margin-left: 20px;
                width: 2em;
                background-color: #e8e8e8;
                cursor: pointer;

                &:hover {
                    background-color: #d6d6d6;
                }
            }
        }
      }
      .calendaer-title {
        text-align: center;
        font-weight: bolder;
      }
    }
    .calendar-content {
      .calendar-week-wrap {
        display: grid;
        grid-template-columns: repeat(7, 33px);
        grid-template-rows: repeat(1, 32px);
        gap: 5px;
        border-bottom: 1px solid rgb(236, 235, 235);
        p {
          text-align: center;
          line-height: 30px;
        }
      }
      .everyDays-wrap {
        display: grid;
        grid-template-columns: repeat(7, 33px);
        grid-template-rows: repeat(6, 33px);
        gap: 5px;
        margin: 10px 3px;
        .everyDays-item {
          position: relative;
          // font-size: 18px;
          // font-weight: bold;
          color: #333;
          text-align: center;
          cursor: pointer;
          border-radius: 2px;
          border: 2px solid transparent;
          p {
            height: 33px; // 暂无农历和考勤icon标志时使用
            line-height: 33px; // 暂无农历和考勤icon标志时使用
          }
          span {
            display: block;
            width: 100%;
            font-size: 11px;
            transform: scale(0.91);
            font-weight: normal;
            color: rgb(197, 196, 196);
            position: absolute;
            top: 19px;
          }
          .everyDays-item-flag {
            font-size: 12px;
            color: #f96464;
            position: absolute;
            top: 30px;
            left: 50%;
            margin-left: -6px;
          }
        }
        .no-current-month {
          // 非当前月
          color: #cccccc;
          cursor: no-drop !important;
          background-image: linear-gradient(
            45deg,
            rgba(0, 0, 0, 0.03) 25%,
            transparent 25%,
            transparent 50%,
            rgba(0, 0, 0, 0.03) 50%,
            rgba(0, 0, 0, 0.03) 75%,
            transparent 75%,
            transparent
          );
          background-size: 8px 8px;
        }
        .current-hover {
          // 当前月hover
          &:hover {
            background-color: rgba(0, 0, 0, 0.1);
            color: #fff;
            border-radius: 2px;
          }
        }
        .realToday {
          // 现实情况的今天
          border-radius: 2px;
          border: 2px solid rgb(189, 189, 194);
        }
        .selectDay {
          // 当前月选中的日
          background: rgba(88, 98, 203, 1) !important;
          color: #fff !important;
          border-radius: 2px !important;
        }
        .yearFirstDay {
          // 切换非现实情况的当前年选中的日
          border-radius: 2px;
          border: 2px solid rgba(88, 98, 203, 1);
        }
        .monthFirstDay {
          // 切换非现实情况的当前月选中的日
          border-radius: 2px;
          border: 2px solid rgba(88, 98, 203, 1);
        }
      }
    }
  }
}
</style>
